import React from 'react';
import { View, Text, StyleSheet, ScrollView, ImageBackground, TouchableOpacity } from 'react-native';
import '../../common/global';
import Icon from 'react-native-vector-icons/AntDesign';

const data = [
    { image: require('../../Image/list1.png'), text: '运动' },
    { image: require('../../Image/list1_1.png'), text: '散步' },
    { image: require('../../Image/list1_2.png'), text: '午睡' },
    { image: require('../../Image/list1_3.png'), text: '看书' },
    { image: require('../../Image/list1_4.png'), text: '安眠' },
]

const More = ({ navigation, route }) => {
    return (
        <ScrollView style={{ flex: 1, overflow: 'hidden' }}>
            <View style={styles.headerStyle}>
                <Text onPress={() => navigation.goBack()}><Icon name="arrowleft" size={25}></Icon></Text>
                <Text style={{ marginLeft: ptd(10), fontSize: 20 }}>白噪音</Text>
            </View>
            <View style={styles.list}>
                {
                    data.map((item, idx) => {
                        return (
                            <TouchableOpacity style={styles.itemS} key={idx}>
                                <ImageBackground imageStyle={{ borderRadius:25 }} source={item.image} style={styles.imgS} resizeMode="stretch"></ImageBackground>
                                <View style={styles.txt}><Text style={{fontSize:20}}>{item.text}</Text></View>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    headerStyle: {
        width: w,
        height: ptd(45),
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: ptd(10),
        borderBottomColor:'rgba(0,0,0,0.2)',
        borderBottomWidth:1
    },
    list: {
        margin: 5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
    },
    itemS: {
        width: '46%',
        margin: '2%',
        height: ptd(200),
        borderRadius: 25
    },
    imgS: {
        width: '100%',
        height: ptd(160),
        borderRadius: 25
    },
    txt:{
        width:'100%',
        height: ptd(40),
        borderBottomLeftRadius:25,
        borderBottomRightRadius:25,
        justifyContent:'center',
        paddingLeft:ptd(10)
    }
})

export default More;